<template>
  <div class="form">
    <label class="form-title">{{ form?.title }}</label>
		<u-form
			ref="refForm"
			labelPosition="top"
			label-width="100%"
			:model="state.formData"
			:size="form?.size"
			error-type="toast"
		>
			<template v-for="(c, idx) in comps" :key="idx" :style="colStyle" :span="12" class="comp">
				<template v-if="c.permission[taskKey] && c.permission[taskKey].visible">
					<comp-input v-if="c.config.compTag == 's-input'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					<comp-textarea v-if="c.config.compTag == 's-textarea'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					<comp-label v-if="c.config.compTag == 's-label'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					<comp-number v-if="c.config.compTag == 's-number'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					<comp-amount v-if="c.config.compTag == 's-amount'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					<comp-link v-if="c.config.compTag == 's-link'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					<comp-radio v-if="c.config.compTag == 's-radio'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					<comp-check v-if="c.config.compTag == 's-check'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					<comp-select v-if="c.config.compTag == 's-select'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					<comp-star v-if="c.config.compTag == 's-star'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					<comp-date v-if="c.config.compTag == 's-date'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					<comp-date-range v-if="c.config.compTag == 's-date-range'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					<comp-time v-if="c.config.compTag == 's-time'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					<comp-time-range v-if="c.config.compTag == 's-time-range'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					<comp-upload v-if="c.config.compTag == 's-upload'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					
					<comp-approve-user-name v-if="c.config.compTag == 's-approve-user-name'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					<comp-approve-time v-if="c.config.compTag == 's-approve-time'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
					<comp-approve-comment v-if="c.config.compTag == 's-approve-comment'" :data="getData(c)" :form="form" :mode="mode" @value-change="onChange"/>
				</template>
			</template>
		</u-form>
    <div class="footer">
      <u-button style="width: 100px" @click="onClose">关闭</u-button>
      <template v-if="mode == 'apply'">
        <u-button type="primary" style="width: 100px" :loading="props.loading" @click="onSubmit">提交</u-button>
      </template>
      <template v-if="mode == 'approve'">
        <u-button type="primary" style="width: 100px" :loading="props.loading" @click="onApprove({ pass: true })">
          同意
        </u-button>
        <u-button
          v-if="btn && btn.reject.allow"
          type="error"
          style="min-width: 100px"
          :loading="props.loading"
          @click="onApprove({ pass: false })"
        >
          {{ btn.reject.name }}
        </u-button>
        <u-button
          v-if="btn && btn.back.allow"
          type="warning"
          style="min-width: 100px"
          :loading="props.loading"
          @click="onApprove({ back: true })"
        >
          {{ btn.back.name }}
        </u-button>
        <u-button
          v-if="btn && btn.backToFirst.allow"
          type="warning"
          style="min-width: 100px"
          :loading="props.loading"
          @click="onApprove({ backToFirst: true })"
        >
          {{ btn.backToFirst.name }}
        </u-button>
        <u-button
          v-if="btn && btn.forward.allow"
          type="warning"
          style="min-width: 100px"
          :loading="props.loading"
          @click="onApprove({ forward: true })"
        >
          {{ btn.forward.name }}
        </u-button>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'

const props = withDefaults(
  defineProps<{
    form: Record<string, any>
    comps: any[]
    dataValue?: any
    loading?: boolean
    taskKey?: string
    apply?: boolean
    view?: boolean
    approve?: boolean
  }>(),
  { apply: false, view: false, taskKey: '' }
)
const emits = defineEmits(['submit', 'close', 'approve'])

const refForm = ref()
const state = reactive({ formData: {} as any, isSetRules: false })

const colStyle = computed(() => {
  const margin = `margin-top: ${props.form?.rowSpacing / 2}px; margin-bottom: ${props.form?.rowSpacing / 2}px;`
  return `${margin}`
})

const setRules = () => {
	if (!state.isSetRules) {
		const rules = {}
		for(let i = 0; i < props.comps.length; i++) {
			const c = props.comps[i].propsData
			rules[c.field] = c.rules
		}
		refForm.value.setRules(rules)
	}
}

const mode = computed(() => {
  if (props.approve) {
    return 'approve'
  } else if (props.apply) {
    return 'apply'
  } else if (props.view) {
    return 'view'
  } else {
    return 'view'
  }
})

const btn = computed(() => props.form?.button[props.taskKey])

const getData = (comp: any) => {
  let propsData: any
  if (props.taskKey) {
    propsData = Object.assign({}, comp.propsData, {
      readonly: !comp.permission[props.taskKey].modify,
      remove: comp.permission[props.taskKey].remove
    })
  } else if (props.view) {
    propsData = Object.assign({}, comp.propsData, {
      readonly: true,
      remove: false
    })
  } else {
    propsData = comp.propsData
  }
  if (props.dataValue) {
    //赋值内容
    propsData.defaultVal = props.dataValue[propsData.field]
  }
  return propsData
}

const onChange = (obj: any) => {
  state.formData[obj.name] = obj.value
}

const onSubmit = () => {
	setRules()
	refForm.value.validate().then(() => {
		emits('submit', {
		  title: props.form.title,
		  formJson: JSON.stringify(props),
		  formValue: JSON.stringify(state.formData)
		})
	})
}
const onApprove = (params: any) => {
	setRules()
	refForm.value.validate().then(() => {
		const flowParams = { ...params }
		for (let key in state.formData) {
		  if (key.startsWith('approve')) {
		    flowParams[key] = state.formData[key]
		  }
		}
		emits('approve', {
		  formValue: JSON.stringify(state.formData),
		  flowParams
		})
	})
}
const onClose = () => {
  emits('close')
}
</script>

<style lang="scss" scoped>
.form-title {
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: $--size-font-x-large;
	border-bottom: 1px solid $u-border-color; //$--color-border-1level;
}
.form {
  background-color: #ffffff;
  padding: 40rpx;
  // .comp {
  //   padding: 16rpx;
  //   margin-left: 0;
  //   margin-right: 0;
  //   :deep(.el-form-item) {
  //     margin-bottom: 0;
  //   }
  // }
}
.footer {
  display: flex;
  justify-content: center;
  padding: 40px 15px 15px 15px;
	gap: 10rpx;
	border-top: 1px solid $u-border-color;
}
</style>
